<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <title>提交订单</title>
    <link href="/res/css/common/baseAzt.css" rel="stylesheet" type="text/css"/>
    <link href="/res/css/common/backcommon.css" rel="stylesheet" type="text/css"/>
    <link href="/res/css/respective/order/back-order.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">
        .editAddress li {
            cursor: pointer;
        }
        .editAddress li:hover {
            background-position: 0 -175px;
        }
        .message {
            width: 650px;
            margin-right: 10px;
            padding: 0 10px;
            height: 28px;
            line-height: 28px;
            border: 1px solid #e9e9e9;
            resize: none;
            overflow: auto;
        }
        .tanbox .btn a.blue{
        	background-color: #00b1db;
		 	border:1px solid #00b1db;
		 	color:white;
        }
        .tanbox .btn a:hover{
        	border-color:#00ceff;
        	color: white;
        	background-color: #00ceff;
        }
        .placeOrder .editAddress li .num a{
        	color: #00b1db;
        }
         .placeOrder .editAddress li .num a:hover{
        	color: #00ceff;
        }
    </style>
</head>
<body style="background:#f2f2f2;">
[#include "/front/common/front_head.html"]
<div class="placeOrder" style="margin-top: 80px;">
    <div class="title">选择收货地址</div>
    <div class="editAddress">
        [#--<ul>
            [#list addressList as address]
                [#assign isDefault = address.setdefault!0]
                <li [#if isDefault == 1]class="on"[/#if] data-addressId="${address.id!}" [#if address_index > 3]style="display: none;"[/#if] >
                    <em></em>
                    <div class="adtitle">
                        [#if isDefault == 1]<span>默认地址</span>[#else]<a href="javascript:void(0)" onclick="setDefaultAddress('${address.id!}')">设为默认地址</a>[/#if]
                        <label>${address.name!}</label>
                    </div>
                    <p class="name">${address.provinceName!} ${address.cityName!} ${address.areaName!} ${address.addr!}</p>
                    <div class="num">
                        <span>
                            <a href="javascript:void(0)" onclick="showAddress('${address.id!}')">编辑</a>
                            <a href="javascript:void(0)" onclick="showRemoveAddressWin('${address.id!}')">删除</a>
                        </span>
                        <label>[#if address.tel?? && address.tel != '']${address.tel!}[#else]${address.phone!}[/#if]</label>
                    </div>
                </li>
            [/#list]
            <li class="add" [#if addressList?? && addressList?size > 4]style="display: none;"[/#if]>
                <a href="javascript:void(0)" onclick="showAddress()"><span></span>新增收货地址</a>
            </li>
        </ul>
        <div class="clear"></div>
        [#if addressList?? && addressList?size > 4]
        <a href="javascript:void(0)" style="color: #00b1db; text-decoration: none;" onclick="$('.editAddress li').show(); $(this).hide();">更多地址</a>
        [/#if]--]
    </div>
    <div class="title">发票信息</div>
    <div class="invoiceBox">
        <div class="invtabtitle">
            <label>发票类型：</label>
            <a href="javascript:void(0)" class="on" data-invoice="3">增值税专用发票<span></span></a>
            <a href="javascript:void(0)" data-invoice="2">增值税普通发票<span></span></a>
            <a href="javascript:void(0)" data-invoice="1">无需发票<span></span></a>
        </div>
        <div class="invtabcont">
            <div class="sinvtabcont">
                <ul>
                    <li>
                        <label>公司名称：</label>
                        <div class="inputfile">
                            <span style="height: 30px; line-height: 30px;">${topCompany.companyName!}</span>
                        </div>
                    </li>
                    <li>
                        <label>纳税人识别号：</label>
                        <div class="inputfile">
                            <input type="text" placeholder="请填写纳税人识别号" id="taxNumber" name="taxNumber" value="${companyInfo.taxNumber!}"
                                   data-display="纳税人识别号" data-rule="required(a[data-invoice=3].on)" />
                        </div>
                    </li>
                    <li>
                        <label>注册地址：</label>
                        <div class="inputfile">
                            <input type="text" placeholder="请填写注册地址" id="taxAddress" name="taxAddress"
                                   value="[#if companyInfo.regProvinceArea??]${companyInfo.regProvinceArea.name!}[/#if][#if companyInfo.regCityArea??]${companyInfo.regCityArea.name!}[/#if][#if companyInfo.regAreaArea??]${companyInfo.regAreaArea.name!}[/#if]${companyInfo.regAddress!}"
                                   data-display="注册地址" data-rule="required(a[data-invoice=3].on)"/>
                        </div>
                    </li>
                    <li>
                        <label>注册电话：</label>
                        <div class="inputfile">
                            <input type="text" placeholder="请填写注册电话" id="taxPhone" name="taxPhone" value=""
                                   data-display="注册电话" data-rule="required(a[data-invoice=3].on)"/>
                        </div>
                    </li>
                    <li>
                        <label>开户银行：</label>
                        <div class="inputfile">
                            <input type="text" placeholder="请填写开户银行" id="taxOpenbank" name="taxOpenbank" value="${companyBank.openingBank!}"
                                   data-display="开户银行" data-rule="required(a[data-invoice=3].on)"/>
                        </div>
                    </li>
                    <li>
                        <label>开户账号：</label>
                        <div class="inputfile">
                            <input type="text" placeholder="请填写开户账号" id="taxBankNumber" name="taxBankNumber" value="${companyBank.bankCardNumber!}"
                                   data-display="开户帐号" data-rule="required(a[data-invoice=3].on); num;" data-rule-num="$('a[data-invoice=3].on').length == 1 ? [/^\d+$/, '请输入正确的开户帐号'] : true" />
                        </div>
                    </li>
                    [#--<li>
                        <label>&nbsp;</label>
                        <div class="inputfile"><a href="#" class="abtn">立即保存</a></div>
                    </li>--]
                </ul>
            </div>
            <div class="sinvtabcont" style="display:none;">
                <ul>
                    <li>
                        <label>发票抬头：</label>
                        <div class="inputfile">
                            <span style="height: 30px; line-height: 30px;" id="taxTitle" name="taxTitle">${topCompany.companyName!}</span>
                        </div>
                    </li>
                    [#--<li>
                        <label>&nbsp;</label>
                        <div class="inputfile"><a href="#" class="abtn">立即保存</a></div>
                    </li>--]
                </ul>
            </div>
            <div class="sinvtabcont" style="display:none;">
                <p>&nbsp;</p>
            </div>
        </div>
    </div>
    <div class="title">项目信息</div>
    <div class="projectInfo">
        <span><i class="gray">项目名称：</i><a href="/xmh/${enquiry.id!}" style="text-decoration: none;" target="_blank" title="${enquiry.enquiryName!}">${CommonUtil.getSimpleStr(enquiry.enquiryName!, 10)}</a></span>
        <span><i class="gray">甲方名称：</i>${enquiry.enqProject.customerName!} </span>
        <span><i class="gray">报价截止时间：</i>${enquiry.deadline?date!}</span>
    </div>
    <div class="title">确认订单信息</div>

    [#list list as data]
        <div class="dataTable orderTable" data-quoteId="${data.quote.id}">
            <div class="alltd">
                <div class="cname" title="${data.quote.companyName!}">卖家：<a href="/shop/company/${data.quote.companyId!}" target="_blank">${CommonUtil.getSimpleStr(data.quote.companyName!"", 20)}</a></div>
            </div>
            <table>
                <thead>
                    <tr class="tdtitle">
                        <td width="35%"><p class="name font14">商品名称</p></td>
                        <td width="13%">品牌</td>
                        <td width="13%">型号</td>
                        <td width="13%">单价</td>
                        <td width="13%">数量</td>
                        <td width="13%">小计</td>
                    </tr>
                </thead>
                <tbody>
                [#list data.itemList as item]
                    <tr data-itemId="${item.quoteItem.id!}" data-quantity="${item.quantity!}">
                        <td><p class="name">${item.quoteItem.productName!}</p></td>
                        <td>${item.quoteItem.brand!}</td>
                        <td>${item.quoteItem.model!}</td>
                        <td>￥${item.quoteItem.unitprice!}</td>
                        <td>${item.quantity!} ${item.quoteItem.unit!}</td>
                        <td><b class="orange">￥${(item.quoteItem.unitprice * item.quantity)?string('#.##')}</b></td>
                    </tr>
                [/#list]
                </tbody>
            </table>
            <div class="placemsg fix">
                <div class="txt">
                    <input type="text" class="message" placeholder="给卖家留言(不能超过100个字)" name="message" data-display="留言" data-rule="length(~100)"/>
                </div>
                <div class="price">
                    <p>小计： <span class="orange">￥${data.orderPrice}</span></p>
                    [#--<p>优惠：￥0</p>--]
                </div>
            </div>
        </div>
    [/#list]

    <div class="discountPrice">
        <p>合计金额：<b> ￥${totalPrice!}</b></p>
        [#--<p>优惠金额：￥0</p>--]
    </div>
    <div class="payPrice">
        <p>应付总额：<b class="orange">￥${totalPrice}</b></p>
        <p class="p2" id="showAddress"></p>
    </div>
    <div class="btn btn-right"><a href="javascript:void(0)" onclick="submitOrder()" class="abtn">提交订单</a></div>
</div>
[#include "/front/common/front_foot.html"]
<!--收货地址弹出框 -->
<div class="tanbox tanEditAddress" style="display:none;" id="addressWin"></div>

<!--确认删除 -->
<div class="tanbox tanConfirm" style="display: none" id="removeAddressWin">
    <input type="hidden" name="addressId">
    <div class="tanbg"></div>
    <div class="box">
        <span class="closed"></span>
        <div class="cont">
            <p>您确定要删除该收货地址吗？</p>
            <div class="btn">
                <a class="blue" href="javascript:void(0)" onclick="removeAddress()">确定</a>
                <a href="javascript:void(0)" onclick="$('#removeAddressWin').hide()">取消</a>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="addressTemplate">
    <div class="tanbg"></div>
    <div class="box">
        <div class="title"><span class="closed"></span>[:=this.title||'':]收货地址</div>
        <form id="addressForm" data-validator-option="{theme:'yellow_right', timely:3}">
            <input type="hidden" name="id" value="[:=this.id||'':]">
            <div class="cont">
                <ul>
                    <li>
                        <label>收货人：</label>
                        <div class="inputfile">
                            <input type="text" value="[:=this.name||'':]" placeholder="收货人" class="input" name="name" data-display="收货人" data-rule="required"/>
                        </div>
                    </li>
                    <li>
                        <label>所在地区：</label>
                        <div class="inputfile">
                            <div class="d1">
                                <select id="order_province" name="province" data-val="[:=this.province||'':]" data-display="所在地区" data-rule="required" data-target="#order_district">
                                    <option value="">请选择</option>
                                </select>
                                <select id="order_city" name="city" data-val="[:=this.city||'':]" data-display="所在地区" data-rule="required" data-target="#order_district">
                                    <option value="">请选择</option>
                                </select>
                                <select class="last" id="order_district" name="area" data-val="[:=this.area||'':]" data-display="所在地区" data-rule="required">
                                    <option value="">请选择</option>
                                </select>
                                <div class="d2">
                                    <input type="text" class="input" placeholder="详细地址" name="addr" value="[:=this.addr||'':]" data-display="详细地址" data-rule="required"/>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <label>手机号码：</label>
                        <div class="inputfile">
                            <input type="text" class="input telPhone" placeholder="请填写常用手机号码" name="tel" value="[:=this.tel||'':]"
                                   data-display="手机号码" data-rule="required(from, .telPhone);mobile" data-msg-required="请至少填写一种联系方式"/>
                        </div>
                    </li>
                    <li>
                        <label>固定电话：</label>
                        <div class="inputfile">
                            <input type="text" class="input telPhone" placeholder="固定电话" name="phone" value="[:=this.phone||'':]"
                                   data-display="固定电话" data-rule="required(from, .telPhone)"/>
                            <div class="ck">
                                <input id="setDefaultCheck" type="checkbox" name="setdefault" value="1" [:if(this.setdefault||0 == 1) {:]checked[:}:]/>
                                <label for="setDefaultCheck" style="float: none;">设为默认地址</label>
                            </div>
                        </div>
                    </li>
                    <li>
                        <label>&nbsp;</label>
                        <div class="inputfile btn btn-left">
                            <a href="javascript:void(0)" onclick="saveAddress()" style="background-color: #00b1db; color: #ffffff;">保存收货地址</a>
                            <a href="javascript:void(0)" onclick="$('#addressWin').hide()">取消</a>
                        </div>
                    </li>
                </ul>
            </div>
        </form>
    </div>
</script>

<script type="text/javascript" src="/res/js/common/jquery.1.9.1.min.js"></script>
<script type="text/javascript" src="/res/third/nice-validator/jquery.validator.min.js?local=zh-CN"></script>
<script type="text/javascript" src="/res/third/layer/layer.js"></script>
<script type="text/javascript" src="/res/js/common/tppl.js"></script>
<script type="text/javascript" src="/res/js/common/jquery.freezeheader.js"></script>
<script type="text/javascript" src="/res/js/common/jquery.address.js"></script>
<script type="text/javascript">
    $(function () {
        //显示收货地址
        $('.editAddress').load('/order/address', function() {
            setShowAddress();
        });

        //固定表头
        $.each($('.orderTable table'), function() {
            if($(this).height > 670) {
                $(this).freezeHeader({height: '760px'});
            }
        });
    });

    //初始化表单校验
    $('.placeOrder').validator({
        formClass: 'n-yellow',
        msgClass: 'n-right',
        msgArrow: '<span class="n-arrow"><b>◆</b><i>◆</i></span>',
        timely : 3
    });

    //发票类型切换
    $('.invtabtitle a').click(function () {
        $(this).siblings('a').removeClass('on').end().addClass('on');
        $('.sinvtabcont').hide().eq($(this).index() - 1).show();

        //清除验证提示信息
        $('.sinvtabcont').eq($(this).index() - 1).find('input[type=text]').each(function() {
            $('.placeOrder').validator('hideMsg', this);
        });
        return false;
    });

    //发票信息提交交互
    $('.sinvtabcont .abtn').click(function () {
        $(this).parents('ul').addClass('disabled');
        $(this).parents('.sinvtabcont').find('input').attr('disabled', 'disabled');
        return false;
    });

    //弹窗关闭
    $('.tanbox').on('click', '.closed', function () {
        $(this).parents('.tanbox').hide();
    });

    //选中收货地址（点击里面的超链接的时候不选中）
    $('.editAddress').on('click', 'li', function (e) {
        var event = e||window.event;
        var $obj = $(e.srcElement || e.target);
        if(!$obj.is('a')) {
            if(!$obj.is('li')) {
                $obj = $obj.parents('li');
            }
            if(!$obj.hasClass('add')) {
                $('.editAddress li[data-addressid]').removeClass('on');
                $($obj).addClass('on');
                setShowAddress();
            }
        }
    });

    function setShowAddress() {
        var $addr = $('.editAddress li[data-addressId].on');
        if($addr && $addr.length > 0) {
            $('#showAddress').html('寄送至： ' + $addr.find('p.name').html() + ' 收货人：' + $addr.find('.adtitle label').html() + ' ' + $addr.find('.num label').html());
        }
    }

    //设置默认收货地址
    function setDefaultAddress(addressId) {
        var i = layer.load(2, {shade: 0.1});
        $.ajax({
            url : '/address/setDeafault',
            type : 'post',
            dataType : 'json',
            data : {addressId : addressId},
            success : function(data) {
                if(data.success) {
                    var j = layer.load(2, {shade: 0.1});
                    $('.editAddress').load('/order/address?all=' + ($('.editAddress li[data-addressId]:hidden').length == 0), function() {
                        layer.close(j);
                        layer.msg("操作成功");
                    });
                } else {
                    layer.alert("操作失败");
                }
            },
            complete : function() {
                layer.close(i);
            }
        });
    }

    //删除收货地址
    function removeAddress() {
        var i = layer.load(2, {shade: 0.1});
        var addressId = $('#removeAddressWin input[name=addressId]').val();
        $.ajax({
            url : '/address/remove',
            type : 'post',
            dataType : 'json',
            data : {addressId : addressId},
            success : function(data) {
                if(data.success) {
                    $('#removeAddressWin').hide();
                    var j = layer.load(2, {shade: 0.1});
                    $('.editAddress').load('/order/address?all=' + ($('.editAddress li[data-addressId]:hidden').length == 0), function() {
                        layer.close(j);
                        layer.msg("操作成功");
                    });
                } else {
                    layer.alert("操作失败");
                }
            },
            complete : function() {
                layer.close(i);
            }
        });
    }

    //弹出收货地址框
    function showAddress(addressId) {
        if(addressId) {
            $.ajax({
                url : '/address/' + addressId,
                type : 'post',
                dataType : 'json',
                beforeSend : function() {
                    layer.load(2, {shade: 0.1});
                },
                success : function(data) {
                    if(data.success) {
                        data.obj.title = '编辑';
                        $('#addressWin').html(tppl($('#addressTemplate').html(), data.obj));
                        $.address({
                            province : 'order_province',
                            city : 'order_city',
                            district : 'order_district'
                        });
                        $('#addressWin').show();
                    } else {
                        layer.alert("获取收货地址异常");
                    }
                },
                complete : function() {
                    layer.closeAll('loading');
                }
            })
        } else {
            $('#addressWin').html(tppl($('#addressTemplate').html(), {title : '新增'}));
            $.address({
                province : 'order_province',
                city : 'order_city',
                district : 'order_district'
            });
            $('#addressWin').show();
        }
    }

    //新增、编辑收货地址
    function saveAddress() {
        if($('#addressForm').isValid()) {
            var i = layer.load(2, {shade: 0.1});
            $.ajax({
                url : '/address/save',
                type : 'post',
                dataType : 'json',
                data : $('#addressForm').serialize(),
                success : function(data) {
                    if(data.success) {
                        $('#addressWin').hide();
                        var j = layer.load(2, {shade: 0.1});
                        $('.editAddress').load('/order/address?all=' + ($('.editAddress li[data-addressId]:hidden').length == 0), function() {
                            layer.close(j);
                            layer.msg("操作成功");
                        });
                    } else {
                        layer.alert("操作失败");
                    }
                },
                complete : function() {
                    layer.close(i);
                }
            });
        }
    }

    //提交订单
    function submitOrder() {
        if($('.placeOrder').isValid()) {
            //封装订单数据
            var addressId = $('.editAddress li[data-addressId].on').attr('data-addressId');

            //单独验证收货地址
            if(!addressId) {
                layer.msg('请选择收货地址');
                return;
            }

            var invoice = $('.invtabtitle a[data-invoice].on').attr('data-invoice');
            var taxTitle = $('#taxTitle').html();
            var taxNumber = $('#taxNumber').val();
            var taxAddress = $('#taxAddress').val();
            var taxPhone = $('#taxPhone').val();
            var taxOpenbank = $('#taxOpenbank').val();
            var taxBankNumber = $('#taxBankNumber').val();

            var data = [];
            $('.orderTable').each(function() {
                var quoteId = $(this).attr('data-quoteId');
                var message = $(this).find('input[name=message]').val();
                var items = [];
                $(this).find('tr[data-itemid]').each(function() {
                    var itemId = $(this).attr('data-itemId');
                    var quantity = $(this).attr('data-quantity');
                    items.push({itemId : itemId, quantity : quantity});
                });
                var order = {};
                order.quoteId = quoteId;
                order.message = message;
                order.items = items;
                data.push(order);
            });

            $.ajax({
                url : '/order/submitQuoteOrder',
                type : 'post',
                dataType : 'json',
                data : {addressId : addressId, invoice : invoice, taxTitle : taxTitle, taxNumber : taxNumber,
                    taxAddress : taxAddress, taxPhone : taxPhone, taxOpenbank : taxOpenbank, taxBankNumber : taxBankNumber, data : JSON.stringify(data)},
                beforeSend : function() {
                    layer.load(2, {shade: 0.1});
                },
                success : function(data) {
                    if(data.success) {
                        location.replace('/order/quote/success?id=' + data.obj);
                    } else {
                        layer.alert(data.msg);
                    }
                },
                complete : function() {
                    layer.closeAll('loading');
                }
            })
        }
    }

    function showRemoveAddressWin(addressId) {
        $('#removeAddressWin input[name=addressId]').val(addressId);
        $('#removeAddressWin').show();
    }
</script>
</body>
</html>
